<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title</title>
		  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .nav {
      width: 900px;
      height: 60px;
      background-color: black;
      margin: 0 auto;
    }
    
    .nav li {
      width: 100px;
      height: 60px;
      /*border: 1px solid yellow;*/
      float: left;
      position: relative;
      overflow: hidden;
    }
    
    .nav a {
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: 24px;
      color: blue;
      text-align: center;
      line-height: 60px;
      text-decoration: none;
      z-index: 2;
    }
    
    .nav span {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: yellow;
      top: 60px;
    }
  </style>
	<script src="../jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	    $(function(){
      		$(".nav li").mouseenter(function () {
        	$(this).children("span").stop().animate({top: 0});
        	//播放音乐
        	var idx = $(this).index();
        	$(".nav audio").get(idx).load();
        	$(".nav audio").get(idx).play();
      	}).mouseleave(function () {
        	$(this).children("span").stop().animate({top: 60});
      	});
      //节流阀: 按下的时候,触发,如果没谈起,不让触发下一次
			//1.定义一个hreflag
			var flag = true;
			//按下1-9这几个数字键,能触发对应的mouseenter事件
			$(document).on("keydown",function(e){
				if(flag) {
					flag = false;
					//获取到按下的键
					var code = e.keyCode;
					if(code >= 49 && code <= 57){
						//触发对应的li的mouseenter事件
						$(".nav li").eq(code - 49).mouseenter();
					}
				}
			});
			$(document).on("keyup",function(e){
				flag = true;
				if(flag){
					//获取到按下的键
					var code = e.keyCode;
					if(code >= 49 && code <= 57){
						//触发对应的li的mouseenter事件
						$(".nav li").eq(code - 49).mouseleave();
					}
				}
			});
			//弹起的时候,触发mouseleave事件
		});
	</script>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="javascript:void(0);">导航1</a>
					<span></span>
				</li>
				<li><a href="javascript:void(0);">导航2</a><span></span></li>
				<li><a href="javascript:void(0);">导航3</a><span></span></li>
				<li><a href="javascript:void(0);">导航4</a><span></span></li>
				<li><a href="javascript:void(0);">导航5</a><span></span></li>
				<li><a href="javascript:void(0);">导航6</a><span></span></li>
				<li><a href="javascript:void(0);">导航7</a><span></span></li>
				<li><a href="javascript:void(0);">导航8</a><span></span></li>
				<li><a href="javascript:void(0);">导航9</a><span></span></li>
			</ul>
			
			<div>
				<audio src="mp3/1.ogg"></audio>
				<audio src="mp3/2.ogg"></audio>
				<audio src="mp3/3.ogg"></audio>
				<audio src="mp3/4.ogg"></audio>
				<audio src="mp3/5.ogg"></audio>
				<audio src="mp3/6.ogg"></audio>
				<audio src="mp3/7.ogg"></audio>
				<audio src="mp3/8.ogg"></audio>
				<audio src="mp3/9.ogg"></audio>
			</div>
		</div>
	</body>
</html>